<template>
    <el-col>
       
        <el-row :gutter="20">
            
            <el-col :span="4" style="padding: 0;">
                <nav-bar @win="getwin">
                </nav-bar>
            </el-col>
            <el-col  id="context" style="padding: 0;" >
                 <el-row id="head" :gutter="20"  >
                    <el-button type="text" @click="logout" >退出登录</el-button>
                    <el-button type="text" v-if="! this.$global.is_login" @click="LoginFormVisible = true">登录</el-button>
                    <el-button type="text" v-else disabled style="color: #2c3e50">{{this.$global.username}}</el-button>
                    <el-button type="text" @click="RegisterFormVisible = true">注册</el-button>
                </el-row>
                <component :is="isshow" :filter="dfilter" @goToDevice="gotodevice"></component>
            </el-col>
        </el-row>
        <el-dialog title="登录" :visible.sync="LoginFormVisible">
            <el-form :model="LoginForm" >
                <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="LoginForm.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input type="password" v-model="LoginForm.password" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="LoginFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="LoginSubmitForm">确 定</el-button>
            </div>
        </el-dialog>
         <el-dialog title="注册" :visible.sync="RegisterFormVisible">
            <el-form :model="RegisterForm" >
                <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="RegisterForm.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input type="password" v-model="RegisterForm.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话" :label-width="formLabelWidth">
                <el-input v-model="RegisterForm.phone" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="RegisterFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="RegisterSubmitForm">确 定</el-button>
            </div>
        </el-dialog>
    </el-col>
    
</template>
<script>
import navBar from "./navbar/index";
import deviceListVue from "./contexts/deviceList.vue";
import deviceMoveVue from "./contexts/deviceMove.vue";
import updateLogVue from "./contexts/updateLog.vue";
import updateStatisticsVue from "./contexts/updateStatistics.vue";
import productListVue from "./contexts/productList.vue";
import {Axios} from "../../static/util";


export default {
  name: 'Home',

  data(){
    return {
        isshow:productListVue,
        is_login:false,
        LoginFormVisible:false,
        RegisterFormVisible:false,
        usernmae:'',
         LoginForm: {
            username: '',
            password: '',
        },
        RegisterForm:{
            username: '',
            password: '',
            phone:'',
        },
        formLabelWidth: '120px',
        dfilter:'',
    };
  },
  methods:{
        getwin(data){
            switch(data){
                case 1:{this.isshow = productListVue;break}
                case 2:{this.isshow = deviceListVue;break}
                case 3:{this.isshow = updateLogVue;break}
                case 4:{this.isshow = updateStatisticsVue;break}
                case 5:{this.isshow = deviceMoveVue;break}
            }
            this.dfilter = '';
        },
        LoginSubmitForm(){
            let form = this.LoginForm;
            let self = this;
            Axios(
                'post',
                'http://127.0.0.1:5000/user/login',
                form,
                (res)=>{
                if (res.data.code != "200"){
                    this.$message.warning('错误:'+res.data.msg);
                    
                }else{
                   
                    self.$cookies.set('_token', res.data.token);
                    self.$cookies.set('_uname', res.data.username);
                    self.$cookies.set('_uid', res.data.user_id);
                    self.$cookies.set('_adm', res.data.is_adm);
                    this.$router.go(0);
                }
                
            });


        },
        RegisterSubmitForm(){
            let form = this.RegisterForm;
            let RegisterFormVisible = this.RegisterFormVisible;
            Axios(
                'post',
                "http://127.0.0.1:5000/user/register",
                form,
                (res)=>{
                    if (res.data.code != "200"){
                        this.$message.warning('错误:'+res.data.msg);
                    }else{
                        RegisterFormVisible=false;
                         this.$router.go(0);
                    }
                }   
            );

        },
        logout(){
            this.$cookies.remove('_token');
            this.$cookies.remove('_uname');
            this.$cookies.remove('_uid');
            this.$cookies.remove('_adm');
            this.$router.go(0);

        },
        gotodevice(name){
            this.dfilter = name;
            this.isshow = deviceListVue;
           
            
        }
  },
  components:{navBar,productListVue,deviceListVue,deviceMoveVue,updateLogVue,updateStatisticsVue},
  created: function () {
    this.$global.token = this.$cookies.get('_token');
    this.$global.uid = this.$cookies.get('_uid');
    this.$global.username = this.$cookies.get('_uname');
    this.$global.adm = this.$cookies.get('_adm');
    //////////////////////验证token
    if(this.$global.username){
        this.$global.is_login = true;

    }
  }
}

</script>
<style >
#head{
    background-color: #fff;
    margin-bottom: 1px;
    display: flex;
    flex-direction: row-reverse;
    box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
    padding-right: 3% !important;
    width: 100%;
}
#head>:first-child{
    color: red;
}
#head>:first-child:hover{
    color: brown;
}

#head>*{
    margin-right: 1%;
    
}

.el-col {
border-radius: 4px;
}
#context{
    min-height: 100%;
    width: 84%;
    -webkit-transition: margin-left .28s;
    transition: margin-left .28s;
    margin-left: 15%;
    position: relative;
}

</style>